<template>
  <div>
    <!-- 弹出 -->
      <!--  -->
    <div class="app">
      <div class="app_circle" v-if="jk" @click="gb_jk">
        <div class="app_cntent">
          <div class="img"><img src="../../assets/img/icon/bottom/监控.png" alt="" /></div>
          <p class="icon_text">监控</p>
        </div>
      </div>
      <div class="app_CIRCLE" v-else @click="gb_jk">
        <div class="app_CIRCLE_pop">
          <pop @clickVideo="clickVideo" :statistics="cameraStatistics"></pop>
        </div>
        <div class="app_cntent">
          <div class="img"><img src="../../assets/img/icon/bottom/监控.png" alt="" /></div>
          <p class="icon_text">监控</p>
        </div>
      </div>
      <!-- <div class="app_circle" v-if="Cgq" @click="cgq()">
        <div class="app_cntent">
          <div class="img">
            <img src="../../assets/img/icon/bottom/传感器-f.png" alt="" />
          </div>
          <p class="icon_text">传感器</p>
        </div>
      </div>
      <div class="app_CIRCLE" v-else @click="cgq()">
        <div class="app_cntent">
          <div class="img">
            <img src="../../assets/img/icon/bottom/传感器-f.png" alt="" />
          </div>
          <p class="icon_text">传感器</p>
        </div>
      </div>
      <div class="app_circle" v-if="ZHZF" @click="zhzf()">
        <div class="app_cntent">
          <div class="img">
            <img src="../../assets/img/icon/bottom/行政执法.png" alt="" />
          </div>
          <p class="icon_text">综合执法</p>
        </div>
      </div>
      <div class="app_CIRCLE" v-else @click="zhzf()">
        <div class="app_cntent">
          <div class="img">
            <img src="../../assets/img/icon/bottom/行政执法.png" alt="" />
          </div>
          <p class="icon_text">综合执法</p>
        </div>
      </div> -->
      <!--  -->
      <div class="app_circle" v-if="RLT" @click="rlt">
        <div class="app_cntent">
          <div class="img">
            <img src="../../assets/img/icon/bottom/热力图.png" alt="" />
          </div>
          <p class="icon_text">热力图</p>
        </div>
      </div>
      <div class="app_CIRCLE" v-else @click="rlt">
        <div class="app_CIRCLE_pop">
          <hot-map @clickMap="handleClickMap"></hot-map>
        </div>
        <div class="app_cntent">
          <div class="img">
            <img src="../../assets/img/icon/bottom/热力图.png" alt="" />
          </div>
          <p class="icon_text">热力图</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pop from '../components/Monitoring.vue'
import HotMap from './HotMap.vue'
export default {
  components: {
    pop,
    HotMap
  },
  props: {
    cameras: {
      type: Array,
      default: () => []
    },
    showHot: {
      type: Function,
      default: () => {}
    },
    hideHot: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      jk: true,
      Cgq: true,
      ZHZF: true,
      RLT: true,
      showPeopleMap: false,
      showCarMap: false,
      showCameraMark: false,
      showCircle: false
    }
  },
  computed: {
    cameraStatistics () {
      const { cameras } = this
      const result = { online: 0, offline: 0, unknow: 0, sum: 0 }
      // 0 未知 1在线 2离线
      cameras.forEach(e => {
        e.status === 0 && result.unknow++
        e.status === 1 && result.online++
        e.status === 2 && result.offline++
        result.sum++
      })
      return result
    }
  },
  methods: {
    clickVideo (flag) {
      let val = false
      const { showCameraMark, showCircle } = this
      if (flag === 'camera') {
        val = showCircle ? true : !showCameraMark
        this.showCameraMark = val
      } else if (flag === 'circle') {
        val = !showCircle
        this.showCircle = val
        this.showCameraMark = val
      }
      this.$emit('showVideo', { flag, value: val })
    },
    handleClickMap (flag) {
      let val = false
      const { showPeopleMap, showCarMap } = this
      if (flag === 'people') {
        val = !showPeopleMap
        this.showPeopleMap = val
      } else if (flag === 'car') {
        val = !showCarMap
        this.showCarMap = val
      }
      this.$emit('showMap', { flag, value: val })
    },
    gb_jk() {
      this.jk = !this.jk
      // if(this.jk == false) return
      // this.showpop=false
    },
    cgq() {
      this.Cgq = !this.Cgq
    },
    zhzf() {
      this.ZHZF = !this.ZHZF
    },
    rlt() {
      this.RLT = !this.RLT
    }
  }
}
</script>
<style scoped>
.app {
  width: 485px;
  height: 197px;
  display: flex;
  justify-content: space-around;
}
.app_circle {
  width: 197px;
  height: 197px;
  border-radius: 50%;
  box-shadow: 5px 5px 30px 20px #2069b2 inset;
}
/* 点击后 */
.app_CIRCLE {
  width: 197px;
  height: 197px;
  border-radius: 50%;
  box-shadow: 5px 5px 30px 20px #57728d inset;
}
/* 弹出 */
.app_CIRCLE_pop{
  position: absolute;
  bottom: 212px;
}
.app_cntent {
  margin-top: 32px;
  text-align: center;
}
.icon_text {
  margin: 0;
  font-size: 25px;
  color: #fff;
}
.img {
  width: 100px;
  height: 90px;
  margin-bottom: 20px;
  margin-left: 50px;
}
img {
  width: 100%;
  height: 100%;
}
</style>